<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/view/common/kendocommon.jsp"%>
<!DOCTYPE html>
<html>
<head>
    <title>图片信息</title>
    <meta charset="utf-8">
    <style>
    	table{font-size:12px}
    </style>
    <script>
        $(document).ready(function() {
        	
        	$("#toolbar").kendoToolBar({
	            resizable: false,
	            items: [
	            	{ type: "separator" },
	                { template: "<label>时间:</label><input name='date_from' id='date_from'>" },
	                { template: "<label>-</label><input name='date_to' id='date_to'>" },
	                { type: "separator" },
	                { type: "button", text: "查询",click: queryCustomerList }
	            ]
	        });
	        
            dataSource = new kendo.data.DataSource({
                transport: {
                    read:  {
                        url: "${path}/assist/queryPhotoList?c_user_id=${c_user_id}",
                        dataType: "json",
                        data: function() {
					        return {
					         	date_from:$('#date_from').val(),
					         	date_to:$('#date_to').val()
					        };
					    }
                    }
                },
                //group: [{field: "deptName"}],
                serverPaging: true,
                serverFiltering: true,
                pageSize: 10,
                schema: {
                	data:"data",
               		total:"total"
                }
            });
            
            $("#grid").kendoGrid({
                dataSource: dataSource,
                pageable: {
					refresh: true,
					pageSizes: true,
					buttonCount: 5,
					page: 1,
					pageSize: 10,
					pageSizes: [10, 20, 30],
					messages: {
						display: "显示 {0}-{1} 共 {2} 项",
						empty: "没有数据",
						itemsPerPage: "每面显示数量",
						first: "第一页",
						last: "最后一页",
						next: "下一页",
						previous: "上一页"
					}
				},
                selectable: "multiple row",
                allowCopy: true,
                groupable: {
                    messages: {
                      empty: "将列拖拽到此处进行分类查看"
                    }
                },
                editable: "popup",
                columns: [
                	//{ field:"id", template: "<input type='checkbox' id='#:id#' />",width: "120px",headerTemplate: '<input type="checkbox" id="check-all" />'},
                    { field:"title", title: "主题",width: "120px"},
                    { field:"createtime", title: "拍摄时间",width: "150px"},
                    { field:"url", title: "照片",width: "150px",template:photoFun},
                    { command: [{name:"getComment",text:"查看评论",click:getComment},
                                {name:"comment",text:"<span class='comm'>评论</span>",click:comment}], 
                        attributes:{style:"text-align:center"},headerAttributes:{style:"text-align:center"},title: "操作", width: "100px" }
                  
                    //{ field: "UnitsInStock", title:"Units In Stock", width:"120px"},//,format:"{0:yyyy/MM/dd}"
                    //{ command: [{name:"editrow",text:"<span class='k-icon k-edit'></span>查看",click:queryCustomerInfo,buttonType:"ImageAndText"}], title: "操作", width: "100px" }
                    ],
                    dataBound: function (e) {
                var grid = e.sender;
                var dataItems = grid.dataSource.data();
                $.each(grid.items(), function (i, item) {
                    var curDataItem = dataItems[i];
                    if(curDataItem.course_image_id==''){
                    	$(item).find(".k-grid-comment").remove();
                    	$(item).find(".k-grid-getComment").remove();

                    }
                });
              } 
                    
                    
            });
            
            $("#date_from").kendoDatePicker({format: "yyyy-MM-dd"});
            $("#date_to").kendoDatePicker({format: "yyyy-MM-dd"});
            
            $(".fancybox").fancybox({
				openEffect	: 'none',
				closeEffect	: 'none'
			});
		});
		
		
		
		var queryCustomerList = function(e){//查询
			//$("#grid").data("kendoGrid").dataSource.read({date_from:$('#date_from').val(),date_to:$('#date_to').val()});
			$("#grid").data("kendoGrid").dataSource.fetch();
			$("#grid").data("kendoGrid").dataSource.page(1);
		}
		
		//单元格照片处理
		var photoFun = function(dataItem){
			return "<a class='fancybox' href='"+dataItem.url+"'><img src='"+dataItem.url+"@200w"+"' alt='' /></a>";
		}
		
		var queryCustomerInfo = function(e){
			var grid = $("#grid").data("kendoGrid");
			e.preventDefault();
            var data = grid.dataItem($(e.currentTarget).closest("tr"));
            setFormData(data);
			$.fancybox($("#inlineForm"));
		    //var dInfo = dialog({
			//	title: '消息',
			//	content: document.getElementById("inlineForm")
		    //})
			//dInfo.showModal();
		}
		
		var setFormData = function(data){
			$('#baby_name').val(data.baby_name);
		}
		

		//查看评论
		var getComment = function(e){
			var grid = $("#grid").data("kendoGrid");
			e.preventDefault();
            var data = grid.dataItem($(e.currentTarget).closest("tr"));
            //setFormData(data);
            $('#commentlist').attr('href','${path}/assist/photoCommentList?course_image_id='+data.course_image_id);
			$.fancybox($("#commentlist"));

		}
		
		
		 var layer2;
	        var comment=function(e){
	     	
	        	layer2=layer.prompt({
	           	    formType: 2,
	           	    title: '请输入回复'
	           	}, function(value, index, elem){
	           		CommentAjax(value,e);
	           	});

	        }

	        var CommentAjax=function(value,e){
	        	console.log('CommentAjax');
	        	
	        	var grid = $("#grid").data("kendoGrid");
	            var data = grid.dataItem($(e.currentTarget).closest("tr"));
	    
				$.ajax({
	   			 	url: "${path}/assist/commentPhone",    //请求的url地址
	   			 	dataType: "json",   //返回格式为json
	   			 	async: true, //请求是否异步，默认为异步，这也是ajax重要特性
	   			 	data: { "toUserID":data.c_user_id,"toUserName":data.user_name,
	   			 		"course_image_id":data.course_image_id,"comment":value},    //参数值
	   			 	//type: "jsonp",   //请求方式
	   			 	
	   			 	//,"fromUserID":"userID","fromUserName":"花花"
	   			 	beforeSend: function() {
	      			  //请求前的处理
	   			 	},
	   			 	success: function(req) {

		   			 	if(req.status=='1'){
		   			 		alert('评论成功');
		   					$("#grid").data("kendoGrid").dataSource.fetch();
		   					
		   			 	}
		   			 layer.close(layer2);
					}
				});
	        }
		
		
    </script>
</head>
<body>
	<div id="toolbar" style="margin:2px"></div>
    <div id="grid" style="margin:2px;font-size:10px"></div>
    
     <a href="${path}/assist/photoCommentList" class="fancybox fancybox.iframe" id="commentlist" title="查看评论" style="display:none"></a>
   
</body>
</html>
